<template>
	<view>
		<u-navbar :border-bottom='false'>
			<view class="searchbox">
				<image src="../../../../static/imgs/sousuohui@3.png" mode=""></image>
				<input type="text" v-model="keyword" placeholder="搜一搜好玩的地方"
					placeholder-style="color:#999999;font-size: 30rpx" confirm-type="search" @confirm="searchFn"
					@change='changeFn' />
			</view>
		</u-navbar>
		<u-dropdown ref="uDropdown">
			<u-dropdown-item :title="title1">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view v-for="(type,index) in typeList" :key='index' class="type-li"
							@click="chooseType(type,index)">
							<view class="name">
								{{type.cate_name}}
							</view>
							<view class="choose" v-if="typeCur == index">
								<u-icon name="checkbox-mark" color="#2979ff" size="28"></u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item v-model="value2" :title="title2" :options="options2" @change='changeFn2'></u-dropdown-item>
			<u-dropdown-item v-model="value3" :title="title3" :options="options3" @change='changeFn3'></u-dropdown-item>
		</u-dropdown>
		<view class="content">
			<view class="content-ul" v-if="shopList.length">
				<view class="content-li" v-for="(item,index) in shopList" :key='index'
					@click="navTo('../shop/shop?id='+item.id)">
					<image class="shoppic" :src="item.icon" mode=""></image>
					<view class="shopinfo">
						<view class="title">
							{{item.shop_name}}
						</view>
						<view class="score">
							{{item.score}}分
						</view>
						<view class="price">
							{{item.average_cost}}元/人
						</view>
						<view class="address">
							{{item.city+'市'+item.district+'区'+ item.address}}
						</view>
					</view>
					<view class="distance">
						距离{{item.distance}}km
					</view>
				</view>

			</view>
			<view class="tips" v-else>
				<u-empty text="暂无门店" mode="address"></u-empty>
			</view>

		</view>
	</view>
</template>

<script>
	import myRequest from '../../../../api/index.js'
	export default {
		data() {
			return {
				typeCur: 0,
				value2: 1,
				value3: 1,
				title1: '全部',
				title2: '价格排序',
				title3: '好评排序',
				options2: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '价格从低到高',
						value: 2,
					},
					{
						label: '价格从高到低',
						value: 3,
					},
				],
				options3: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '好评从低到高',
						value: 2,
					},
					{
						label: '好评从高到低',
						value: 3,
					},
				],
				shopList: [],
				cat_id: '', //分类id
				keyword: '',
				citycode: '',
				lat: '',
				lng: '',
				order: 5, // 排序
				typeList: [],
				page: '1'
			}
		},
		onLoad(option) {
			this.keyword = option.keyword
			this.cat_id = option.id
			this.citycode = option.citycode
			this.lat = option.lat
			this.lng = option.lng
			this.getShopType()
			this.getShop(this.keyword, this.cat_id, this.order)

		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getShop(this.keyword, this.cat_id, this.order)
		},
		methods: {
			chooseType(val, index) {
				this.shopList = []
				this.page = '1'
				this.typeCur = index
				this.title1 = val.cate_name
				this.cat_id = val.id
				this.getShop(this.keyword, this.cat_id, this.order)
			},
			changeFn2(e) {
				this.shopList = []
				this.page = '1'
				if (e == 1) {
					this.order = 5
				}
				if (e == 2) {
					this.title2 = '价格从低到高'
					this.order = 1
				}
				if (e == 3) {
					this.title2 = '价格从高到低'
					this.order = 2
				}
				this.getShop(this.keyword, this.cat_id, this.order)
			},
			changeFn3(e) {
				this.shopList = []
				this.page = '1'
				if (e == 1) {
					this.order = 5
				}
				if (e == 2) {
					this.title2 = '评分从低到高'
					this.order = 4
				}
				if (e == 3) {
					this.title2 = '评分从高到低'
					this.order = 3
				}
				this.getShop(this.keyword, this.cat_id, this.order)
			},

			changeFn() {
				this.shopList = []
				this.page = '1'
				this.getShop(this.keyword, this.cat_id, this.order)
			},
			// 搜索
			searchFn() {
				this.shopList = []
				this.page = '1'
				this.getShop(this.keyword, this.cat_id, this.order)
			},
			// 门店列表
			async getShop(keyword, catId, order) {
				let {
					lat,
					lng,
					citycode,
					page
				} = this
				// console.log(lat, lng, citycode)
				let res = await myRequest.getShoplist({
					page: page,
					lat: lat,
					lng: lng,
					city_code: citycode,
					keyword: keyword ? keyword : '',
					cat_id: catId ? catId : '',
					order: order.toString()
				})
				if (res.status) {
					this.shopList = [...this.shopList, ...res.data]
					if (res.data.length == 0) {
						return
					}
				}
			},

			// 匹配传过来的类型id
			getType() {
				let typeId = this.cat_id
				this.typeList.forEach((item, index) => {
					if (typeId == item.id) {
						this.title1 = item.cate_name
						this.typeCur = index
					}
				})
			},
			// 门店分类
			async getShopType() {
				let that = this
				let res = await myRequest.getCategorytype()
				if (res.status) {
					this.typeList = res.data
					let allObj = {
						cate_desc: "",
						cate_name: '全部',
						icon: '',
						id: ''
					}
					this.typeList.unshift(allObj)
					this.getType()
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.content {
		position: relative;
		top: 88rpx;

		.tips {
			padding-top: 288rpx;
		}

		.content-ul {
			padding: 28rpx;

			.content-li {
				width: 694rpx;
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				margin-bottom: 20rpx;

				.shoppic {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}

				.shopinfo {
					margin-left: 20rpx;
					width: 52%;

					.title {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 600;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.score {
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #FE8C16;
						margin-bottom: 8rpx;
					}

					.price {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #999999;
						margin-bottom: 8rpx;
					}

					.address {
						width: 80%;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.distance {
					margin-left: auto;
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
					padding-top: 124rpx;
				}
			}
		}
	}

	.searchbox {
		display: flex;
		align-items: center;
		width: 602rpx;
		height: 64rpx;
		background: #F2F2F7;
		border-radius: 40rpx;
		padding-left: 32rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		input {
			color: #999999;
			text-indent: 12rpx;
			font-size: 30rpx;
		}
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		padding: 0 28rpx;

		.type-li {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F2;
		}
	}
</style>
